{% extends 'base.html' %} {% block css%}
<style type="text/css">
    .b1 {
        color: blue;
    }
</style>
{% endblock %} {% block body%}
<div class="row">

    <div class="col-md-4">
        <h4>Device</h4>
        <table class="table table-hover form-inline">
            <tr>
                <td style="font-size: 12px" width="25%">IP Address</td>
                <td>
                    <span style="width:140px; height:30px" id="ip_id">
                        192.168.1.100
                    </span>
                </td>
                <td>
                    <button class="btn btn-danger" id="btn_set_ip">
                    Set
                    </button>
                </td>
            </tr>


        </table>



    </div>


</div>


<div class="modal" tabindex="-1" role="dialog" id="myModal">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h4 class="modal-title">Settings</h4>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <table class="table form-inline">
                    <tr>
                        <td>
                            <h4>IP Address</h4>
                        </td>
                        <td>
                            <input class="form-control" type="text" style="width:390px; height:30px" id="ip_val" placeholder="192.168.1.x" />
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <h4>Port</h4>
                        </td>
                        <td>
                            <input class="form-control" type="text" style="width:390px; height:30px" id="port_val" value="22" />
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <h4>Username</h4>
                        </td>
                        <td>
                            <input class="form-control" type="text" style="width:390px; height:30px" id="username_val"/>
                        </td>
                    </tr>

                    <tr>
                        <td>
                            <h4>Password</h4>
                        </td>
                        <td>
                            <input class="form-control" type="password" style="width:390px; height:30px" id="password_val"/>
                        </td>
                    </tr>

                </table>
    
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-danger" id="ip_set_save_changes">
                    Connect
                </button>
                <button type="button" class="btn btn-secondary" data-dismiss="modal">
                    Close
                </button>
            </div>
        </div>
    </div>
</div>
{% endblock %} {% block js%}
{{ super() }}
<script type="text/javascript">
// var zoom = 100; //default
/**
* Verify IP Address IPv4 *
*/
function fnValidateIPAddress(ipaddr) {
    //Only verify C-class address
    ipaddr = ipaddr.replace( /\s/g, "") 
    var re = /^\d{1,3}\.\d{1,3}\.\d{1,3}\.\d{1,3}$/; //regex. check for digits and in
                                          //all 4 quadrants of the IP
    if (re.test(ipaddr)) {
        //split into units with dots "."
        var parts = ipaddr.split(".");
        //if the first unit/quadrant of the IP is zero
        if (parseInt(parseFloat(parts[0])) == 0) {
            return false;
        }
        //if the fourth unit/quadrant of the IP is zero
        if (parseInt(parseFloat(parts[3])) == 0) {
            return false;
        }
        //if any part is greater than 255
        for (var i=0; i<parts.length; i++) {
            if (parseInt(parseFloat(parts[i])) > 255){
                return false;
            }
        }
        return true;
    } else {
        return false;
    }
}

$(document).ready(function() {
    toastr.options = {
        "closeButton": true,
        "positionClass": "toast-top-center"
    }

    // $("#info_bar").hide();
    // get_settings();

        // url = "/api/get_settings";
        // $.get(url, function(data, status) {
        //     console.log(data);
        //     d = JSON.parse(data);

        //     if (d["connect_status"] == "on") {
        //         $.each(d, function(index, value) {
        //             // alert(index + ' --->' + value);
        //             if(index == "sn_id")
        //                 $("#" + index).val(value);
        //             else if(index == "board_type")
        //                 $("#" + index).val(value).prop('selected',true);
        //             else if(index == "mac")
        //             {
        //                 console.log(value);
        //                 mac = value.split('-');

        //                 $("#mac0").val(parseInt('0x'+mac[0]));
        //                 $("#mac1").val(parseInt('0x'+mac[1]));
        //                 $("#mac2").val(parseInt('0x'+mac[2]));
        //                 $("#mac3").val(parseInt('0x'+mac[3]));
        //                 $("#mac4").val(parseInt('0x'+mac[4]));
        //                 $("#mac5").val(parseInt('0x'+mac[5]));
        //             }
        //             else
        //                 $("#" + index).html(value);
        //             // $("#" + index).val(value).prop('selected',true);
        //         });

        //         $("#ip_id").html(
        //             d["ip_id"] +
        //             "&nbsp;<span style='color:green' class='glyphicon glyphicon-ok'></span>"
        //         );
        //     } else {
        //         $("#info_bar_text").html("<h4><i class='glyphicon glyphicon-bell'></i> Can't connect to the host board!</h4><br>Please make sure: <br>- Host board and PC are on the same network segment<br>- Host board power on <br>- Network cable plugged <br><br>");
        //         $("#info_bar").show();
        //     }

        //     //------------------
        //     url = "/api/get_host_fw_ver";
        //     $.get(url, function(ret, status) {
        //         console.log(ret);
        //         $("#fw_id").html(ret);
        //     });


        // });
        

    $("#btn_set_ip").click(function() {
        $("#myModal").modal();
    });


    // $("#btn_set_device_sn").click(function() {
    //     $.post(
    //         "api/set_device_sn", {
    //             sn_val: $("#sn_id").val()
    //         },
    //         function(data, status) {
    //             console.log("data: " + data);
    //         }
    //     );
    // });


    $("#ip_set_save_changes").click(function() {
        //verify ip address
        if (fnValidateIPAddress($("#ip_val").val()) == false )
        {
            alert("Invalid IP address!");
            return false;
        }
        alert("The IP address has been successfully save to the GUI configuration file. Please restart the GUI.");
        $.post(
            "api/set_device_ip", {
                ip_val: $("#ip_val").val()
            },
            function(data, status) {

                console.log("data: " + data);
                $(".alert").removeClass().addClass("alert alert-danger");
                $("#myModal").hide();
            }
        );
    });

    $("#btn_reconnect").click(function() {
        $.post(
            "api/btn_reconnect", {
            },
            function(data, status) {
                console.log("data: " + data);
            }
        );
    });




});
</script>
{% endblock %}